<script setup lang="ts">
import type { recordAddRequest } from '@/types/api/record'
import { recordApi } from '@/request/api'
import { useHideLoading, useLoading, useToast } from '@/utils'
import { onLoad } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { reactive, ref } from 'vue'
import {
  coerce as zcoerce,
  number as znumber,
  object as zobject,
  string as zstring,
} from 'zod'

const radiovalue = ref()
const changeBtn = ref<boolean>(true)
const form = reactive<recordAddRequest>({
  identNumber: '',
  phone: '',
  name: '',
  sesameScore: '',
  code: 'user',
  channelId: '',
})
onLoad(async (options: any) => {
  if (!options.userId) {
    useToast('二维码缺少数据，请联系工作人员')
    return
  }
  form.channelId = options.userId
})
async function handleSubmit() {
  if (!radiovalue.value) {
    useToast('请先阅读并同意相关协议')
    return
  }
  const zparse = zobject({
    name: zstring()
      .trim()
      .min(1, { message: '请填写完整姓名' })
      .regex(/^[\u4E00-\u9FA5]{2,50}$/, { message: '请填写1-50位中文姓名' }),
    phone: zstring()
      .trim()
      .min(1, { message: '请填写完整手机号' })
      .regex(/^1[3-9]\d{9}$/, { message: '请填写正确格式手机号' }),
    identNumber: zstring()
      .trim()
      .min(1, { message: '请填写完整身份证号' })
      .regex(/(^\d{15}$)|(^\d{18}$)|(^\d{17}[\dX]$)/i, {
        message: '请输入有效的15位或18位身份证号',
      }),
    sesameScore: zcoerce
      .number()
      .int({ message: '芝麻信用分必须为整数' })
      .min(200, { message: '芝麻信用分值范围:200~999' })
      .max(999, { message: '芝麻信用分值范围:200~999' }),
    code: zstring().trim(),
    channelId: zstring().trim(),
  }).safeParse(form)
  if (!zparse.success) {
    return useToast(zparse.error.issues[0].message)
  }
  useLoading(true)
  const [err, res] = await to(recordApi.ReviewAdd(zparse.data))
  useHideLoading()
  if (err) {
    return
  }

  changeBtn.value = false
}

function openPdf() {
  uni.navigateTo({
    url: `/add/pdf?userId=${form.channelId}`, // 匹配 /add/:id
  })
}
</script>

<template>
  <view v-if="changeBtn" class="px-30px p-b-60px p-t-150px">
    <view class="overflow-hidden rd-16px bg-white pl-20px">
      <uni-forms :model-value="form">
        <uni-forms-item class="" label="姓名" name="name">
          <input
            v-model="form.name"
            class="h-100px text-26px"
            type="text"
            placeholder="姓名"
          >
        </uni-forms-item>
        <uni-forms-item class="" label="手机号" name="phone">
          <input
            v-model="form.phone"
            class="h-100px text-26px"
            type="text"
            maxlength="11"
            placeholder="手机号"
          >
        </uni-forms-item>
        <uni-forms-item class="" label="身份证" name="identNumber">
          <input
            v-model="form.identNumber"
            class="h-100px text-26px"
            type="text"
            placeholder="身份证"
          >
        </uni-forms-item>
        <uni-forms-item class="" label="芝麻分" name="sesameScore">
          <input
            v-model="form.sesameScore"
            class="text-26px"
            type="number"
            placeholder=" 芝麻信用分值范围:200~999"
          > </uni-forms-item></uni-forms>
      <view class="mt-30px p-b-20px">
        <uv-radio-group v-model="radiovalue">
          <uv-radio name="true" true-value="true" false-value="false">
            <template #default>
              <view class="flex items-center">
                <span class="text-25px"> 我已阅读并同意</span>
                <span class="text-26px text-#338dff" @click="openPdf">
                  《个人风控信息授权书》
                </span>
              </view>
            </template>
          </uv-radio>
        </uv-radio-group>
      </view>
    </view>
  </view>
  <view
    v-if="changeBtn"
    class="w-full flex pt-15px safe-pb-15px"
  >
    <view
      class="btn-primary-black mx-a w-680px text-36px lh-80px"
      :class="{ 'op-50': !radiovalue }"
      @click="handleSubmit"
    >保存</view>
  </view>
  <view v-if="!changeBtn">
    <view class="flex flex-col items-center p-t-250px">
      <uv-icon size="50" name="checkmark-circle" color="success"></uv-icon>
      <view class="mt-20px">已录入,请关闭当前网页</view>
    </view>
  </view>
</template>

<style lang="less" scoped>
:deep(.uni-forms) {
  .uni-forms-item {
    --uno: 'items-center b-b-gray-300 b-b-solid !mb-0';
    height: 100rpx;
    border-bottom-width: 1rpx;
  }
}
</style>
